<template>
  <view class="success-page">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="nav-left" @click="goBack">
        <text class="back-icon">←</text>
      </view>
    </view>

    <!-- 支付成功提示 -->
    <view class="success-section">
      <text class="success-icon">✓</text>
      <text class="success-text">支付成功</text>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button class="action-btn outline" @click="goToHome">返回首页</button>
      <button class="action-btn filled" @click="goToOrders">查看订单</button>
    </view>

    <!-- 推荐景点 -->
    <view class="recommend-section">
      <view class="section-header">
        <text class="red-packet"> <text class="amount">5</text>元 </text>
        <text class="title">新人奖励红包</text>
        <button class="claim-btn">立即领取</button>
      </view>

      <view class="section-title">为您推荐</view>

      <view class="spots-grid">
        <view class="spot-item" v-for="spot in recommendSpots" :key="spot.id">
          <image class="spot-image" :src="spot.coverImage" mode="aspectFill" />
          <view class="spot-info">
            <text class="spot-name">{{ spot.name }}</text>
            <view class="spot-stats">
              <!-- <text class="rating">{{ spot.rating }}分</text> -->
              <!-- <text class="reviews">{{ spot.reviews }}条点评</text> -->
              <!-- <text class="visitors">{{ spot.visitors }}人去过</text> -->
            </view>
            <view class="spot-location">
              <!-- <text class="distance">距离{{ spot.distance }}km</text> -->
            </view>
            <view class="spot-price">
              <text class="price">¥{{ spot.price }}</text>
              <text class="unit">起</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { contentList } from "@/api/system/homestay.js";
import config from "@/config";

export default {
  data() {
    return {
      baseUrl: config.baseUrl,
      recommendSpots: [],
    };
  },

  created() {
    this.getRecommendSpots();
  },

  methods: {
    // 获取推荐景点
    getRecommendSpots() {
      contentList().then((res) => {
        this.recommendSpots = res.rows;
        this.recommendSpots.forEach((item) => {
          item.coverImage = item.coverImage;
          //计算最低价
          if (item.homestayRoomList && item.homestayRoomList.length > 0) {
            item.price = Math.min(
              //扩展运算符可以把数组中的元素转换成多个参数
              ...item.homestayRoomList.map((room) => Number(room.price))
            );
          } else {
            item.price = "暂无房型";
          }
        });
        console.log(this.recommendSpots[0].coverImage);
      });
    },
    goBack() {
      uni.navigateBack();
    },
    goToHome() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    goToOrders() {
      uni.navigateTo({
        url: "/pages/order/orders",
      });
    },
  },
};
</script>

<style scoped>
.success-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 44px 16px 12px;
  background: #fff;
  z-index: 100;
}

.nav-left {
  width: 24px;
}

.back-icon {
  font-size: 24px;
  color: #333;
}

.success-section {
  margin-top: 72px;
  padding: 48px 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.success-icon {
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  background: #52c41a;
  color: #fff;
  border-radius: 24px;
  font-size: 24px;
}

.success-text {
  font-size: 20px;
  font-weight: 500;
  color: #333;
}

.action-buttons {
  padding: 24px 16px;
  display: flex;
  gap: 16px;
}

.action-btn {
  flex: 1;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border-radius: 4px;
  font-size: 16px;
}

.outline {
  background: #fff;
  border: 1px solid #ddd;
  color: #666;
}

.filled {
  background: #007aff;
  color: #fff;
}

.recommend-section {
  background: #fff;
  padding: 16px;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.red-packet {
  background: #ff4d4f;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
}

.amount {
  font-size: 20px;
  font-weight: bold;
  margin-right: 2px;
}

.title {
  font-size: 16px;
  color: #333;
}

.claim-btn {
  margin-left: auto;
  background: #ff4d4f;
  color: #fff;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 14px;
}

.section-title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin-bottom: 16px;
}

.spots-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.spot-item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.spot-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.spot-info {
  padding: 8px;
}

.spot-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.spot-stats {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.rating,
.reviews,
.visitors {
  font-size: 12px;
  color: #666;
}

.spot-location {
  margin-bottom: 4px;
}

.distance {
  font-size: 12px;
  color: #666;
}

.spot-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.price {
  font-size: 16px;
  font-weight: bold;
  color: #ff4d4f;
}

.unit {
  font-size: 12px;
  color: #ff4d4f;
}
</style>